// 添加人员

<template>
    <div @touchmove.prevent>
        <van-popup v-model="visible" position="bottom" class="popup-bg" get-container="body"
            :style="{ height: '100%', background: '#F4F6F9' }" :lock-scroll="false">
            <f7-page>
                <f7-navbar>
                    <f7-nav-left>
                        <f7-link @click="fnColse" icon-material="chevron_left" force></f7-link>
                    </f7-nav-left>
                    <f7-nav-title>添加人员</f7-nav-title>
                    <f7-nav-right> </f7-nav-right>
                </f7-navbar>
                <div class="search-box">
                    <van-search v-model="personName" @search="searchQuery" @clear="reset" shape="round"
                        background="#1990ff" placeholder="姓名" show-action>
                        <template #action>
                            <div @click="searchQuery" class="search-bar-btn">搜索</div>
                        </template>
                    </van-search>
                </div>
                <div class="radio-list">
                    <van-list class="search-list" v-model="loading" :finished="finished" finished-text="没有更多了"
                        @load="dataQuery" v-if="query.data.length > 0">
                        <van-checkbox-group v-model="result" class="van-clearfix">
                            <li v-for="(item, index) in query.data" :key="index" @click="toggle(item, index)">
                                <van-checkbox :name="item[busiKey]" shape="square" ref="checkboxes"></van-checkbox>
                                <div class="search-list-item">
                                    <img v-if="!item.certAttachmentId && !item.attachmentId" class="left-img"
                                        src="../../../../../assets/img/qzjx/defaultAvatar.png" width="60" height="80" />
                                    <img v-else  class="left-img" :src="$util.getImgSrc(item.certAttachmentId?item.certAttachmentId:item.attachmentId)" width="60" 
                                        height="80" />
                                    <div class="right-box">
                                        <div class="total-top">
                                            <span class="code text-overflow-two">{{ item.personName }}</span>
                                        </div>
                                        <div class="total-bottom">
                                            <div class="name-box">
                                                <span>发证机关：<span class="value">{{ item.certStand || '--' }}</span></span>
                                            </div>
                                            <div class="name-box">
                                                <span>证书有效期：<span class="value" :class="checkTime(item.certEndDate) ? 'value-red' : ''">{{ showTime1(item.certEndDate) }}</span></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </van-checkbox-group>
                    </van-list>
                    <v-empty v-else description="暂无数据" />
                </div>
                <f7-toolbar position="bottom" no-shadow class="fff">
                    <span>已选{{ result.length }}项</span>
                    <f7-button fill class="submit-btn" @click="fnSave()">提交</f7-button>
                </f7-toolbar>
            </f7-page>
        </van-popup>
    </div>
</template>

<script>
export default {
    name: "person-popup",
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        // 操作后自动关闭组件
        autoClose: {
            type: Boolean,
            default: true,
        },
        url: {
            type: String,
        },
        extraParams: {// 额外的参数
            type: Object,
            default: () => {
                return {};
            },
        },
        chooseArr: {
            type: Array,
            default: () => [],
        },
        busiKey: {
            type: String,
        }
    },
    computed: {
        visible: {
            get() {
                if (this.value == true && this.chooseArr.length > 0) {
                    if (this.chooseArr.length > 0) {
                        let lastChooseList = this.chooseArr.map((item) => item[this.busiKey]);
                        this.result = JSON.parse(JSON.stringify(lastChooseList));
                        this.chooseList = [];
                        this.chooseList = JSON.parse(JSON.stringify(this.chooseArr));
                    } else {
                        this.result = [];
                        this.chooseList = [];
                    }
                }
                return this.value;
            },
            set(val) {
                this.$emit("input", val);
            },
        },
    },
    data() {
        return {
            personName: "",
            result: [],
            query: {
                data: [],
            },
            start: 0,
            length: 10,
            recordsTotal: null,
            loadFlag: true,
            loading: false,
            finished: false,
            chooseList: [],
        };
    },
    created() {
        this.searchQuery();
    },
    methods: {
        showTime1(date) {
            if (date) {
                return formatter.formatDate(date, "yyyy-MM-dd");
            } else {
                return "--";
            }
        },
        checkTime(date) {
            let currentDate = formatter.formatDate(new Date(), "yyyy-MM-dd");
            let currentDateNum = Date.parse(currentDate);
            let dateNum = Date.parse(date);
            if (Number(currentDateNum) > Number(dateNum)) {
                return true;
            } else {
                return false;
            }
        },
        searchQuery() {
            // 设置start为0，数组清空，然后才加载数据
            this.start = 0;
            this.query.data = [];
            this.loadData();
        },
        reset() {
            this.personName = "";
            this.start = 0;
            this.query.data = [];
            this.loadData();
        },
        dataQuery() {
            console.log("触发111", this.recordsTotal);
            if (this.loadFlag) {
                if (this.recordsTotal && this.query.data.length >= this.recordsTotal) {
                    this.finished = true;
                } else {
                    this.loadFlag = false;
                    this.loadData();
                }
            }
        },
        loadData(rqurl = this.url) {
            let self = this;
            if (rqurl) {
                let params = {
                    start: self.start,
                    length: self.length,
                    query: {
                        personName: self.personName,
                    },
                };
                if (this.extraParams) {
                    if (this.extraParams && Object.keys(this.extraParams).length > 0) {
                        Object.keys(this.extraParams).forEach((item) => {
                            params["query"][item] = this.extraParams[item];
                        });
                    }
                }
                self.$f7.preloader.show();
                self.$f7.request.postJSON(
                    rqurl,
                    params,
                    (r) => {
                        self.$f7.preloader.hide();
                        self.loading = false;
                        if (r) {
                            if (_.isArray(r.data)) {
                                _.each(r.data, (item) => {
                                    self.query.data.push(item);
                                });
                                self.start += self.length;
                                self.recordsTotal = r.recordsTotal;
                                self.$emit("onAfterQuery", self.query.data);
                            }
                        }
                        self.loadFlag = true;
                    },
                    (r) => {
                        self.loadFlag = true;
                    }
                );
            }
        },
        // 关闭组件
        fnColse() {
            this.visible = false;
        },
        // 提交
        fnSave() {
            let isOk = true;
            let val = this.chooseList;
            let warnObj = val.find(
                (pitem) => pitem.enabledWork === false || pitem.enabledWork === 0
            );
            if (warnObj) {
                isOk = false;
                this.$f7.dialog.alert(
                    warnObj.personName +
                    "该人员在一年内存在违章作业情况，暂时不允许再作业。！"
                );
                return false;
            }
            this.autoClose && this.fnColse();
            this.$emit("save", this.chooseList);

        },
        toggle(item, index) {
            let canCheck = this.checkTime(item.validEndDate);
            if (!canCheck) {
                this.$refs.checkboxes[index].toggle();
                if (!this.$refs.checkboxes[index].checked) {
                    this.chooseList.push(item);
                } else {
                    let index = this.chooseList.findIndex(
                        (citem) => citem[this.busiKey] == item[this.busiKey]
                    );
                    this.chooseList.splice(index, 1);
                }
            }
        },
    },
};
</script>
<style lang="less" scoped>
@import url("../../../../../assets/css/commonSelect.less");

.search-list li .right-box {
    margin-left: 10px;
}
.search-list-item{
    .left-img{
        object-fit: cover;
    }
}
.radio-list {
    padding-bottom: 10px !important;
}
</style>
